import React from 'react';
import Footer from '@/components/footer'
const RentalIndex = () => {
    const [rentallist, setCateList] = React.useState([
        {
            id: 1,
            thumbs_text: 'https://img.yzcdn.cn/vant/cat.jpeg',
        }
    ])
    const [list, setList] = React.useState([])
    const [finished, setFinished] = React.useState(false)
    const [page, setPage] = React.useState(1)
    async function CategoryData() {
        let result = await React.$api.RentalIndex({
            page: page
        })
        if (result) {
            if (result.code == 1) {
                var lists = [...list, ...result.data.list]
                setCateList(result.data.rentallist)
                setList(lists)
                setPage(page + 1)

                setTimeout(() => {
                    setFinished(false)
                }, 1000)
            } else {
                setFinished(true)
                React.$vant.Toast.info(result.msg)
                return false
            }
        }
    }
    // 下拉刷新
    const PullRefreshDemo = () => {
        setList([])
        setPage(1)
        setFinished(false)
        return new Promise(resolve => {
            setTimeout(() => {
                React.$vant.Toast.info('刷新成功')
                resolve(true)
            }, 1000)
        })

    }

    const load = async () => {
        setFinished(true)
        CategoryData()
    }
    return (
        <>
            <div className="banner_shouy">
                <React.$vant.Swiper style={{ height: 230 }} autoplay={5000}>
                    {rentallist.map((item) => (

                        <React.$vant.Swiper.Item key={item.id}>
                            <React.$router.NavLink to={`/lease/info/${item.id}`}>
                                <React.$vant.Image lazyload src={item.thumbs_text} fit="cover" />
                            </React.$router.NavLink>
                        </React.$vant.Swiper.Item>

                    ))}
                </React.$vant.Swiper>
            </div>
            <div className="lest_xs">
                <ul>
                    <React.$vant.PullRefresh onRefresh={() => PullRefreshDemo(true)} >

                        <React.$vant.List finished={finished} onLoad={load} offset={5} >
                            {
                                list.map((item) => {
                                    return (
                                        <li key={item.id}>
                                            <React.$router.NavLink to={`/lease/info/${item.id}`}>
                                                <img src={item.thumbs_text} alt="" />
                                                <p>{item.name}</p>
                                                <span>{item.createtime}</span>

                                            </React.$router.NavLink>
                                        </li>
                                    )
                                })
                            }
                        </React.$vant.List>
                    </React.$vant.PullRefresh>
                </ul>
            </div >
            <div style={{ height: .75 + 'rem' }}></div>
            <Footer />
        </>


    )
}
export default RentalIndex